<template>
   
  <el-dialog
    title="Order Tracking"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-steps
      direction="vertical"
      :active="6"
      finish-status="success"
      space="50px"
    >
      <el-step
        v-for="item in logisticsList"
        :key="item.name"
        :title="item.name"
        :description="item.time"
      ></el-step>
    </el-steps>
  </el-dialog>
</template>
<script>
const defaultLogisticsList = [
  {
    name: "The order has been submitted and is awaiting payment",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "The order has been successfully paid for",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "It seems like you are referring to a location-based scanning process in Beijing, and the order is awaiting payment. If you need further assistance, please feel free to ask.",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "It sounds like you are describing a process of unloading and scanning at a distribution center in Shenzhen, Guangdong, and the order is awaiting payment. If you need further assistance, feel free to ask.",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "Dispatch scanning at the company in Shenzhen, Guangdong",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "The package has arrived at the destination site, the company in Shenzhen, Guangdong, and will be delivered soon",
    time: "2017-04-01 12:00:00 ",
  },
  {
    name: "The order has been signed for. We look forward to serving you again",
    time: "2017-04-01 12:00:00 ",
  },
];
export default {
  name: "logisticsDialog",
  props: {
    value: Boolean,
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(visible) {
        this.value = visible;
      },
    },
  },
  data() {
    return {
      logisticsList: Object.assign({}, defaultLogisticsList),
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleClose() {
      this.emitInput(false);
    },
  },
};
</script>
<style></style>


